---
image: /generated/articles-docs-freeze.png
id: freeze
title: <Freeze>
crumb: 'API'
---

import {FreezeExample} from '../components/FreezeExample/FreezeExample';

```twoslash include example
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
```

_Available from v2.2.0._

When using the `<Freeze/>` component, all of its children will freeze to the frame that you specify as a prop.

If a component is a child of `<Freeze/>`, calling the [`useCurrentFrame()`](/docs/use-current-frame) hook will always return the frame number you specify, irrespective of any [`<Sequence>`](/docs/sequence).

[`<Html5Video />`](/docs/html5-video), [`<Video>`](/docs/media/video) and [`<OffthreadVideo />`](/docs/offthreadvideo) elements will be paused and [`<Html5Audio />`](/docs/html5-audio) and [`<Audio>`](/docs/media/audio) elements will render muted.

## Example

```tsx twoslash title="MyComp.tsx"
// @include: example-BlueSquare
// ---cut---
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <BlueSquare />
    </Freeze>
  );
};
```

## API

The Freeze component is a high order component and accepts, besides it's children, the following props:

### `frame`

At which frame it's children should freeze.

### `active`<AvailableFrom v="4.0.127"/>

Deactivate freezing component by passing `false`.  
You may also pass a callback function and accept the current frame and return a boolean.

```tsx twoslash title="From frame 30 on"
// @include: example-BlueSquare
// ---cut---
import {Freeze} from 'remotion';

const MyVideo = () => {
  return (
    <Freeze frame={30} active={(f) => f < 30}>
      <BlueSquare />
    </Freeze>
  );
};
```

## Demo

<FreezeExample />

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/freeze.tsx)
- [`useCurrentFrame()`](/docs/use-current-frame)
